<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>点聚合</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html, body, #container {
            height: 100%;
            width: 100%;
        }

        .input-card {
            width: 25rem;
        }

        .input-card .btn {
            width: 7rem;
            margin-right: .7rem;
        }

        .input-card .btn:last-child {
            margin-right: 0;
        }
    </style>
</head>
<body>
<div id="container" class="map" tabindex="0"></div>
<div class="input-card">
    <h4>聚合点效果切换</h4>
</div>

<script src="//a.amap.com/jsapi_demos/static/china.js"></script>
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=7f8186cf42be6f47985552d5cf3d384e&plugin=AMap.Marker"></script>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">
    var  markers = [];

    var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [105, 34],
        zoom: 4
    });
    var count = 55641;
    // 增加点聚合的marker
    function change(datas) {
        map.remove(markers);
        markers=[];
        for (var i = 0; i < datas.length; i += 1) {
            let marker= new AMap.Marker({
                position: [datas[i].centerLatLng.longitude,datas[i].centerLatLng.latitude],
                content: '<div style="background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>',
                offset: new AMap.Pixel(-15, -15)
            })
            let data={
                marker:marker,
                count:datas[i].count
            }
            _renderClusterMarker(data)
            markers.push(marker)
        }
        map.add(markers);
    }
    // 修改点聚合的样式
    function _renderClusterMarker(context) {
        if(context.count==1){
            return
        }
        var factor = Math.pow(context.count / count, 1 / 18);
        var div = document.createElement('div');
        var Hue = 180 - factor * 180;
        var bgColor = 'hsla(' + Hue + ',100%,50%,0.7)';
        var fontColor = 'hsla(' + Hue + ',100%,20%,1)';
        var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
        var shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
        div.style.backgroundColor = bgColor;
        var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
        div.style.width = div.style.height = size + 'px';
        div.style.border = 'solid 1px ' + borderColor;
        div.style.borderRadius = size / 2 + 'px';
        div.style.boxShadow = '0 0 1px ' + shadowColor;
        div.innerHTML = context.count;
        div.style.lineHeight = size + 'px';
        div.style.color = fontColor;
        div.style.fontSize = '14px';
        div.style.textAlign = 'center';
        context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
        context.marker.setContent(div)
    };



    let url="/cs2"
    let totalurl="/total"
    // 获取点数据
    function getData(){
        let data={
            bounds:map.getBounds().toString(),
            mPXInMeters:map.getResolution(),
            zoom:map.getZoom()
        }
        $.ajax({
            url:totalurl,  // ajax请求要请求的地址
            type:"get", // 请求的类型  get  post
            success:function (result) {
                count=result
                $.ajax({
                    url:url,  // ajax请求要请求的地址
                    type:"post", // 请求的类型  get  post
                    data:data, // 请求要发送的数据  常在post请求中使用，get请求只需要拼接请求的url就可以
                    success:function (data) {
                        // 请求成功之后要执行的方法
                        // data  接收请求成功之后的返回值
                        change(data)
                    },
                    error:function (error) {
                        // 请求失败之后要执行的内容
                    }
                })
            },
            error:function (error) {
                // 请求失败之后要执行的内容
            }
        })



    }
    getData()
    // 移动结束事件
    map.on('moveend', getData);
    // 缩放完成事件
    map.on('zoomend', getData);
    // 拖拽完成事件
    map.on('dragend', getData);
</script>
</body>
</html>